import { FC, useCallback, useMemo } from 'react';
import { Input } from 'antd';
import { observer } from 'mobx-react';

import RbProTable, { RbProTableStore } from '@components/RbProTable';
import { Content } from '@components/Page';

import { TableAlignType } from '@/enumTypes/table';
import Button from '@components/Button';
import request from '@utils/request';
import notification from '@utils/notification';

const store = new RbProTableStore();

const TaskTodoList: FC = () => {
  /** 工作流同意处理 */
  const handleApprove = useCallback(() => {
    if (1 !== store.selectedKeys.length) return;
    store.setLoading(true);
    request({
      url: '/flowable/task/complete',
      method: 'POST',
      data: {
        id: store.selectedKeys[0],
        comment: ''
      }
    })
      .then(async (res: any) => {
        if (res) {
          notification.success();
          await store.query();
        }
      })
      .finally(() => {
        store.setLoading(false);
      });
  }, []);

  /** 工作流拒绝处理 */
  const handleReject = useCallback(() => {
    if (1 !== store.selectedKeys.length) return;
    store.setLoading(true);
    request({
      url: '/flowable/task/reject',
      method: 'POST',
      data: {
        id: store.selectedKeys[0],
        comment: ''
      }
    })
      .then(async (res: any) => {
        if (res) {
          notification.success();
          await store.query();
        }
      })
      .finally(() => {
        store.setLoading(false);
      });
  }, []);

  /** 工作流委托处理 */
  const handleDelegate = useCallback(() => {}, []);

  /** 工作流转办处理 */
  const handleTransfer = useCallback(() => {}, []);

  /** 工作流驳回处理 */
  const handleOverrule = useCallback(() => {}, []);

  /** 查询条配置列表 */
  const queryFromItems = useMemo(
    () => [
      {
        name: 'modelName',
        label: '流程名称',
        children: <Input />
      },
      {
        name: 'name',
        label: '任务节点',
        children: <Input />
      }
    ],
    []
  );

  /** 表格列配置 */
  const columns = useMemo(
    () => [
      {
        title: '流程名称',
        dataIndex: 'modelName',
        align: TableAlignType.center,
        width: 140
      },
      {
        title: '任务节点',
        dataIndex: 'name',
        align: TableAlignType.center,
        width: 140
      },
      {
        title: '流程发起人',
        dataIndex: 'startUserName',
        align: TableAlignType.center,
        width: 140
      },
      {
        title: '任务接收时间',
        dataIndex: 'createTime',
        align: TableAlignType.center,
        sorter: true,
        width: 180
      },
      {
        title: '流程发起时间',
        dataIndex: 'instStartTime',
        align: TableAlignType.center,
        sorter: true,
        width: 180
      }
    ],
    []
  );
  return (
    <Content>
      <RbProTable
        rowKey="id"
        columns={columns}
        store={store}
        actionUrl="/flowable/procinst/todoList"
        sticky
        selectionType
        queryConfig={{
          queryFromItems,
          queryFormat: true
        }}
        toolBarRender={() => [
          <Button
            key="approve"
            type="primary"
            disabled={1 !== store.selected.length}
            onClick={() => handleApprove()}
          >
            同意
          </Button>,
          <Button
            key="reject"
            type="primary"
            disabled={1 !== store.selected.length}
            onClick={() => handleDelegate()}
          >
            委托
          </Button>,
          <Button
            key="reject"
            type="primary"
            disabled={1 !== store.selected.length}
            onClick={() => handleTransfer()}
          >
            转办
          </Button>,
          <Button
            key="reject"
            type="primary"
            danger
            disabled={1 !== store.selected.length}
            onClick={() => handleOverrule()}
          >
            驳回
          </Button>,
          <Button
            key="reject"
            type="primary"
            danger
            disabled={1 !== store.selected.length}
            onClick={() => handleReject()}
          >
            拒绝
          </Button>
        ]}
      />
    </Content>
  );
};

export default observer(TaskTodoList);
